<template>
	<div class="billing-type-show-content">
		<div class="billing-type-show">
			{{ allBillingTypes[configItem.billingType] }}
		</div>

		<template v-if="configItem.billingType === 1">
			<span>{{ configItem.amount }}</span>
			<span>{{ configItemTitle.amount }}</span>
		</template>

		<template v-else-if="configItem.billingType === 2">
			<span>{{ configItem.amount }}</span>
			<span>{{ subBillingTypeInfo.multipleTitle }}</span>
		</template>

		<template v-else-if="configItem.billingType === 3">
			<span>{{ configItemTitle.start }}</span>
			<span>{{ configItem.subAmount }}</span>
			<span>
				{{ subBillingTypeInfo.subTypes[configItem.subBillingType] }}，
			</span>
			<span>{{ configItem.subMultipleIncrStep }}</span>
			<span>{{ configItemTitle.incrStep }}，</span>
			<span>{{ configItemTitle.limit }}</span>
			<span>{{ configItem.subLimitAmount }}</span>
			<span v-if="configItem.subIsFirstFree">
				，{{ configItemTitle.firstTimeFree }}
			</span>
		</template>

		<template v-else-if="configItem.billingType === 4">
			<span>{{ configItem.amount }}</span>
			<span>{{ configItemTitle.pot }}</span>
		</template>

		<template v-else>
			<span>-</span>
		</template>

		<template v-if="isInteractiveConfigType || isLookHandConfigType">
			<span>，{{ configItem.rebate }}</span>
			<span>{{ configItemTitle.rebate }}</span>
		</template>
	</div>
</template>

<script>
import {
	allBillingTypes,
	configItemTitle,
	isLookHandConfigTypeFunc,
	isInteractiveConfigTypeFunc,
	getSubBillingTypeInfoFunc
} from '../configItemDict'

export default {
	props: {
		configType: {
			type: Number,
			default: 0
		},
		configItem: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			allBillingTypes,
			configItemTitle,
			isInteractiveConfigType: isInteractiveConfigTypeFunc(
				this.configType
			),
			isLookHandConfigType: isLookHandConfigTypeFunc(this.configType),
			subBillingTypeInfo: getSubBillingTypeInfoFunc(this.configType)
		}
	}
}
</script>

<style lang="scss" scoped>
.billing-type-show-content {
	span {
		font-size: 13px;
	}
}
.billing-type-show {
	margin-bottom: 5px;
}
</style>
